<template>
	<view class="wrap">
		<image class="bgs" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/1.png" mode=""></image>
		<view>

			<view class="sticky" >
				<u-tabs bg-color="none" bar-width="96" inactive-color='#666666' bar-height="5" active-color="#333"
					:list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>

		</view>

		<view class="overview">
			<view class="today">
				今日收益 (元)
			</view>
			<view class="money">
				10.50
			</view>

			<view class="ul">
				<view class="li">
					<view class="name">
						昨日收益 (元)
					</view>
					<view class="num">
						20.89
					</view>
				</view>
				<view class="li">
					<view class="name">
						本月收益 (元)
					</view>
					<view class="num">
						20.89
					</view>
				</view>
				<view class="li">
					<view class="name">
						累计收益 (元)
					</view>
					<view class="num">
						20.89
					</view>
				</view>
			</view>


		</view>

		<view class="titles">
			收益明细
			<view class="sel">

				<u-input class="timeBox" :border="false" type="select" :select-open="actionSheetShow" v-model="time" placeholder="请选择"
					@click="actionSheetShow = true"></u-input>

				
				<u-picker @confirm="actionSheetCallback" v-model="actionSheetShow" mode="time"></u-picker>
			</view>
		</view>
		<list />
		<!-- 无数据 -->
		<!-- <u-empty text="暂无数据" mode="data"></u-empty> -->
	</view>

</template>
<script>
	import list from './list.vue'
	export default {
		components: {
			list
		},
		data() {
			return {
				enable: false,
				actionSheetShow: false,
				time: '',
				

				list: [{
					name: '托管收益'
				}, {
					name: '团队收益'
				}, {
					name: '现金奖励',
				}],
				current: 0

			};
		},
		onLoad() {

		},
		// onPageScroll(e) {
		// 	this.enable = e.scrollTop > 50 ? true : false
		// },
		methods: {
			change(index) {
				this.current = index;
			},
			// 点击actionSheet回调
			actionSheetCallback(val) {
				uni.hideKeyboard();
		
				this.time = val.year+'-'+val.month+'-'+val.day;
			},

		}
	};
</script>
<style lang="scss" scoped>
	.timeBox{
		text-align: right !important;
	}
	
	.stickys1 {
	
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.9) !important;
		z-index: 9999;
		padding-bottom: 30rpx;
	}
	
	.nostickys1 {
	
		position: relative;
	}
	.wrap {
		padding-bottom: 30px;
		// width: 100%;
		// min-height: 100vh;
		// padding-bottom: 30rpx;
		// background-image: url("https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/1.png");
		// background-size: cover;
		// background-repeat: no-repeat;
		// background-attachment: fixed;

		/deep/ .u-tab-bar {
			background: #3757FF !important;
		}

		/deep/ .u-sticky-wrap {
			background: none !important;
		}

		.sticky {
			padding-top: 112rpx;
		}


		.overview {
			margin: 24rpx 32rpx 0;
			// width: 686rpx;
			height: 323rpx;
			background-image: url("https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/17.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.today {
				padding: 49rpx 0 0;
				font-size: 24rpx;
				font-family: PingFang SC-Light, PingFang SC;
				font-weight: 300;
				color: #FFFFFF;
				line-height: 28rpx;
				text-align: center;
			}

			.money {
				font-size: 56rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				line-height: 66rpx;
				text-shadow: 0px 12px 11px rgba(152, 116, 255, 0.25);
				background: linear-gradient(180deg, #FFFFFF 0%, #E5EDFF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				text-align: center;
			}

			.ul {
				margin-top: 39rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.li {
					flex: 1;
					text-align: center;

					.name {
						font-size: 24rpx;
						font-family: PingFang SC-Light, PingFang SC;
						font-weight: 300;
						color: #FFFFFF;
						line-height: 28rpx;
						margin-bottom: 2rpx;
					}

					.num {
						font-size: 36rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						line-height: 42rpx;
						text-shadow: 0px 12px 11px rgba(152, 116, 255, 0.25);
						background: linear-gradient(180deg, #FFFFFF 0%, #E5EDFF 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
			}
		}

		.titles {
			font-size: 28rpx;
			font-family: PingFang SC-Light, PingFang SC;
			font-weight: 300;
			color: #333333;
			line-height: 33rpx;
			display: flex;
			align-items: center;
			padding: 10rpx 34rpx;
			justify-content: space-between;

			.sel {
				min-width: 75px;
				font-size: 24rpx;
				font-family: PingFang SC-Light, PingFang SC;
				font-weight: 300;
				color: #333333;
				line-height: 28rpx;

				/deep/ .u-icon__icon {
					transform: scale(0.6);
				}
			}
		}
	}
</style>
